<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{% endblock %}</title>

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/fontawesome-free/css/all.min.css">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/static/AdminLTE-3.2.0/dist/css/adminlte.min.css">
    <link rel="stylesheet" href="/static/plugins/element-ui/index.css">

    {% block link %}{% endblock %}

    <style>
        .button-margin {
            margin: 5px;
        }
    </style>

</head>
<body class="hold-transition dark-mode sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
<div class="wrapper">

    <!-- Preloader 加载界面 -->
    <div class="preloader flex-column justify-content-center align-items-center">
        <img class="animation__wobble" src="/static/AdminLTE-3.2.0/dist/img/AdminLTELogo.png" alt="AdminLTELogo"
             height="128" width="128">
    </div>

    <div id="app">

        <!-- Form -->
        <el-dialog title="奶茶数据" :visible.sync="dialogVisibleTeaData" width="50%">
            <el-table
                    :data="tableDataTeaData"
                    style="width: 100%"
            >
                <el-table-column
                        prop="id"
                        label="实体 id"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="奶茶名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="奶茶价格"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="sales_volume"
                        label="月销量"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="create_time"
                        label="创建时间"
                        width="180">
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisibleTeaData = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="饿了么页面快照"
                :visible.sync="dialogVisibleSnapshot"
                width="80%"
                {#            :before-close="handleClose"#}
        >
            <el-table
                    :data="tableData"
                    style="width: 100%"
            >
                <el-table-column
                        prop="id"
                        label="实体 id"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="url"
                        label="爬取原始 url"
                        :show-overflow-tooltip="true"
                        width="400">
                </el-table-column>
                <el-table-column
                        prop="create_time"
                        label="创建时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="200">
                    <template slot-scope="scope">
                        <el-button @click="handleClickPageDetail(scope.row)" type="text" size="small">页面快照
                        </el-button>
                        <el-button @click="handleClickPageDetailSource(scope.row)" type="text" size="small">原始链接
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                {#            <el-button @click="dialogVisibleSnapshot = false">取 消</el-button>#}
                <el-button type="primary" @click="dialogVisibleSnapshot = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="预测价格"
                :visible.sync="dialogVisibleForecast"
                width="80%"
        >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="奶茶名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmitForecast">预 测</el-button>
                </el-form-item>
            </el-form>

            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="预测价格">
                    <el-input type="number" readonly v-model="form.price"></el-input>
                </el-form-item>
                <el-form-item label="信息">
                    <el-input readonly v-model="form.msg"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisibleForecast = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="销量预测"
                :visible.sync="dialogVisibleSales"
                width="80%"
        >
            <el-form ref="form" :model="saleForm" label-width="80px">
                <el-form-item label="奶茶名称">
                    <el-input v-model="saleForm.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmitSales">预 测</el-button>
                </el-form-item>
            </el-form>

            <el-form ref="form" :model="saleForm" label-width="80px">
                <el-form-item label="月销量">
                    <el-input type="number" readonly v-model="saleForm.sales"></el-input>
                </el-form-item>
                <el-form-item label="信息">
                    <el-input readonly v-model="saleForm.msg"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisibleSales = false">关 闭</el-button>
            </span>
        </el-dialog>

        <!-- Navbar 主界面左上角 -->
        <nav class="main-header navbar navbar-expand navbar-dark">
            <!-- Left navbar links -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
                </li>
                <li class="nav-item d-none d-sm-inline-block">
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                            数据采集
                        </button>
                        <ul class="dropdown-menu">
                            <li><a @click="dialogVisibleSnapshot=true"
                                   class="btn btn-default button-margin">已爬取页面快照</a>
                            </li>
                            <li>
                                <a @click="dialogVisibleTeaData=true"
                                   class="btn btn-default button-margin">已解析奶茶数据</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item d-none d-sm-inline-block">
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                            奶茶预测
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <a @click="dialogVisibleForecast=true" class="btn btn-default button-margin">
                                    奶茶价格预测
                                </a>
                            </li>
                            <li>
                                <a @click="dialogVisibleSales=true" class="btn btn-default button-margin">
                                    奶茶销量预测
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>

            <!-- Right navbar links -->
            <ul class="navbar-nav ml-auto">
                <!-- Navbar Search -->
                <li class="nav-item">
                    <!-- <a class="nav-link" data-widget="navbar-search" href="#" role="button">
                      <i class="fas fa-search"></i>
                    </a> -->
                    <div class="navbar-search-block">
                        <form class="form-inline">
                            <div class="input-group input-group-sm">
                                <input class="form-control form-control-navbar" type="search" placeholder="Search"
                                       aria-label="Search">
                                <div class="input-group-append">
                                    <button class="btn btn-navbar" type="submit">
                                        <i class="fas fa-search"></i>
                                    </button>
                                    <button class="btn btn-navbar" type="button" data-widget="navbar-search">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                        <i class="fas fa-expand-arrows-alt"></i>
                    </a>
                </li>
            </ul>
        </nav>
        <!-- /.navbar -->

        <!-- Main Sidebar Container -->
        <aside class="main-sidebar sidebar-dark-primary elevation-4">
            <!-- Brand Logo -->
            <a class="brand-link">
                <img src="/static/AdminLTE-3.2.0/dist/img/AdminLTELogo.png" alt="AdminLTE Logo"
                     class="brand-image img-circle elevation-3" style="opacity: .8">
                <span class="brand-text font-weight-light">奶茶外卖预测系统</span>
            </a>

            <!-- Sidebar -->
            <div class="sidebar">
                <!-- Sidebar user panel (optional) -->
                <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                    {#        <div class="image">#}
                    {#          <img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">#}
                    {#        </div>#}
                    <div class="info">
                        <span class="nav-icon fa fa-user"> %% username %% </span>
                        <a href="javascript:login_out()" style="margin-left: 10px"> 退出登录 </a>
                    </div>
                </div>


                <!-- Sidebar Menu 左边菜单栏 -->
                <nav class="mt-2">
                    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                        data-accordion="false">
                        <!-- Add icons to the links using the .nav-icon class
                             with font-awesome or any other icon font library -->
                        <li class="nav-item">
                            <a class="nav-link">
                                {#              <i style="color: white" class="nav-icon fa fa-line-chart"></i>#}
                                <p>
                                    数据图表展示
                                </p>
                            </a>
                        </li>
                        {% block sidebar %}{% endblock %}

                    </ul>
                </nav>
                <!-- /.sidebar-menu -->
            </div>
            <!-- /.sidebar -->
        </aside>
    </div>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content 主界面内容 -->
        <section class="content">
            {% block content %}
            {% endblock %}
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->

    <!-- Main Footer -->
    <footer class="main-footer">
        <strong>Copyright &copy; 2023-2024</strong>
        <div class="float-right d-none d-sm-inline-block">
            <b>Version</b> 1.0.0
        </div>
    </footer>
</div>
<!-- ./wrapper -->

<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="/static/AdminLTE-3.2.0/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="/static/AdminLTE-3.2.0/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- overlayScrollbars -->
<script src="/static/AdminLTE-3.2.0/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/AdminLTE-3.2.0/dist/js/adminlte.js"></script>

<!-- PAGE PLUGINS -->
<!-- jQuery Mapael -->
<script src="/static/AdminLTE-3.2.0/plugins/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="/static/AdminLTE-3.2.0/plugins/raphael/raphael.min.js"></script>
<script src="/static/AdminLTE-3.2.0/plugins/jquery-mapael/jquery.mapael.min.js"></script>
<script src="/static/AdminLTE-3.2.0/plugins/jquery-mapael/maps/usa_states.min.js"></script>

<script src="/static/plugins/vue/vue.js"></script>
<script src="/static/plugins/element-ui/index.js"></script>
<script src="/static/plugins/axios/axios.min.js"></script>

<script src="/static/js/echarts.js"></script>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            dialogVisibleTeaData: false,
            dialogVisibleSnapshot: false,
            dialogVisibleForecast: false,
            dialogVisibleSales: false,
            saleForm: {
                name: "",
                sales: 0,
                msg: ""
            },
            form: {
                name: '',
                price: 0,
                msg: "",
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            tableData: [],
            formLabelWidth: '120px',
            info: {
                name: null,
                address: {
                    street: null,
                    city: null,
                    country: null
                },
                links: [],
                url: null
            },
            tableDataTeaData: []
        },
        mounted() {
            axios.get("/api/crawl/page_source_list").then((response) => {
                {#console.log(response["data"])#}
                this.tableData = response["data"]
            })
            axios.get("/api/admin/all_tea_data").then((response) => {
                {#console.log(response["data"])#}
                this.tableDataTeaData = response["data"]
            })
        },
        methods: {
            start_crawl: function () {
                axios.get("/api/admin/start_crawl").then((response) => {
                    console.log(response.data)
                    this.info = response.data
                })
            },
            handleClickPageDetail: function (value) {
                {#console.log(value["id"])#}
                window.open(`/api/crawl/page_source?page_id=${value["id"]}`)
            },
            handleClickPageDetailSource: function (value) {
                window.open(value["url"])
            },
            onSubmitForecast: function () {
                const tea_name = this.form.name
                axios.get(`/api/admin/price_prediction?tea_name=${tea_name}`).then((response) => {
                    console.log(response.data)
                    this.form.price = response.data["price"]
                    this.form.msg = response.data["msg"]
                })
            },
            onSubmitSales: function () {
                const tea_name = this.saleForm.name
                axios.get(`/api/admin/price_sales?tea_name=${tea_name}`).then((response) => {
                    console.log(response.data)
                    this.saleForm.sales = response.data["sales_volume"]
                    this.saleForm.msg = response.data["msg"]
                })
            }
        }
    });
</script>
<script>
    function login_out() {
        $.get(
            "/api/admin/login_out",
            function () {
                window.location.reload()
            }
        );
    }
</script>

{% block script %}
{% endblock %}

</body>
</html>
